<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/iconfont/iconfont.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/bootstrap-tagsinput/tagsinput.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/jQuery-ui/jquery-ui.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}">
</head>
<style>
    label {
        font-weight: bold;
    }

    @font-face {
        font-family: 'huawen';
        src: url("/fonts/huawen.woff2");
    }

    .label-boxb {
        margin-top: 20px;
    }

    .lable-page-icon {
        color: #ccc;
        position: absolute;
        top: 7px;
        right: 20px;
    }

    .lable-page-icon:hover {
        cursor: pointer
    }
</style>
<body style="background-color: #ffff;letter-spacing:2px;font-family:'huawen' ;font-weight: bold">
<div class="label-box entering-mt col-sm-12">
    <div class="label-boxb col-sm-10">
        <input name="lable" id="lable" placeholder="回车添加新的标签" class="form-control lable" type="text"
               required="" onkeypress='searchKeyWords(event)'>
        <div class="iconfont icon-chacha lable-page-icon" onclick="deleteLablepage(this)"></div>
    </div>

</div>
<!-- 按钮-->
<div class="col-sm-12"
     style="margin-top: 10px;display: flex;justify-content: center;flex-direction: row;">
    <button type="button" class="btn btn-sm btn-warning" onclick="saveLable()">保存
    </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-sm btn-warning" onclick="gclose()">关闭
    </button>&nbsp;
</div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-tagsinput/tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/jQuery-ui/jquery-ui.js}"></script>
<script th:src="@{/ajax/libs/qxEasyUI/jquery.easyui.min.js}"></script>
<script th:src="@{/common/js/hm-ui.js}"></script>
<script>
    //回车
    function searchKeyWords(event) {
        if (event.keyCode == "13") {
            let len = $(".label-box").children().length - 1;
            if (document.getElementsByName("lable")[len].value != '') {
                $(".label-box").append("<div class=\"label-boxb col-sm-10\">\n" +
                    "        <input name=\"lable\"  placeholder=\"回车添加新的标签\" class=\"form-control lable\" type=\"text\"\n" +
                    "               required=\"\" onkeypress='searchKeyWords(event)'>\n" +
                    "        <div class=\"iconfont icon-chacha lable-page-icon\" onclick=\"deleteLablepage(this)\"></div>\n" +
                    "    </div>");
                document.getElementsByName("lable")[len + 1].focus();
                $("input").autocomplete({
                    source: availableTags
                });
            }
        }
    };

    //删除
    function deleteLablepage(a) {
        //找到当前兄弟结节的值
        if (a.previousElementSibling.value != '') {
            //删除节点
            a.parentElement.remove()
            a.remove()
        }
    }

    //提示
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $("input").autocomplete({
        source: availableTags
    });

    //    关闭
    function gclose() {
        $.modal.close();
    }

    //保存
    function saveLable() {
        debugger
        let len = $(".label-box").children().length;
        let value = '';
        for (let i = 0; i < len; i++) {
            value += $('.lable')[i].value;
            if (i == len - 1) {
                value += ''
            } else {
                value += ","
            }
        }
        parent.getLable(value);
        $.modal.close();
    }

    $(function () {
        //  给 input 类型绑定回车事件
        $('.lable').on('keypress', searchKeyWords);
    });
</script>
</html>